<template>
  <div>
    <swiper class="swiper">
      <!-- 推荐菜谱卡片轮播图 -->
      <swiper-slide>
        <!-- 菜谱封面 -->
        <div class="img">
          <img
            src="https://cdn7.axureshop.com/demo/1934191/images/%E6%94%B6%E8%97%8F/u1555.png"
          />
        </div>
        <div class="msg">
          <!-- 标题 -->
          <p>
            <span>意大利肉酱面 | 秘制调料</span>
          </p>
          <p>
            <!-- 用时 -->
            <span>15-30分钟</span>
            <!-- 难度 -->
            <span>零厨艺</span>
          </p>
        </div>
        <!-- 点击进入菜谱详情页 -->
        <router-link to="/detail">就吃这个</router-link>
      </swiper-slide>
      <swiper-slide>
        <!-- 菜谱封面 -->
        <div class="img">
          <img
            src="https://cdn7.axureshop.com/demo/1934191/images/%E6%94%B6%E8%97%8F/u1568.png"
          />
        </div>
        <div class="msg">
          <!-- 标题 -->
          <p>黑森林蛋糕（简易版）</p>
          <p>
            <!-- 用时 -->
            <span>15-30分钟</span>
            <!-- 难度 -->
            <span>零厨艺</span>
          </p>
        </div>
        <!-- 点击进入菜谱详情页 -->
        <router-link to="/detail">就吃这个</router-link>
      </swiper-slide>
      <swiper-slide>
        <!-- 菜谱封面 -->
        <div class="img">
          <img
            src="https://cdn7.axureshop.com/demo/1934191/images/%E6%94%B6%E8%97%8F/u1579.png"
          />
        </div>
        <div class="msg">
          <!-- 标题 -->
          <p>黑森林蛋糕（简易版）</p>
          <p>
            <!-- 用时 -->
            <span>15-30分钟</span>
            <!-- 难度 -->
            <span>零厨艺</span>
          </p>
        </div>
        <!-- 点击进入菜谱详情页 -->
        <router-link to="/detail">就吃这个</router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

export default {
  name: "swiper-example-default",
  title: "Default",
  components: {
    Swiper,
    SwiperSlide,
  },

  mounted() {
    this.swiper = new Swiper(".swiper-container", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  },
};
</script>

<style scoped lang="scss">
.swiper {
  width: 90%;
  height: 450px;
  display: flex;
  padding: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px #ccc;
  .swiper-slide {
    display: flex;
    flex-direction: column;
    .img {
      margin: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #ccc;
      img {
        width: 100%;
      }
    }
    .msg {
      padding: 0 20px;
      p {
        padding: 0 5px;
        line-height: 26px;
        font-size: 16px;
        &:nth-child(2) {
          color: #999;
          font-size: 12px;
          line-height: 20px;
          margin: 5px 0;
          span {
            background-color: rgba(242, 242, 242, 0.509803921568627);
            margin: 5px;
            padding: 3px 5px;
            border-radius: 3px;
          }
        }
      }
    }
    a {
      width: 150px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      align-self: center;
      border: none;
      margin-top: 15px;
      background-color: #000;
      color: #fff;
      border-radius: 20px;
    }
  }
}
</style>
